<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS常用的单位</title>
    <style>

        html{
            font-size: 30px;
        } 
        
        .box1{
            /* 
                长度单位
                    px（像素）
                        - 显示屏是通过一个一个会发光的小点构成的
                            每一个小点就是一个像素
                    % （百分比）
                        - 百分比会参照父元素的指定值来进行计算，
                            会根据父元素属性的变化而变化
                    em
                        - 1em等于当前元素的1font-size
                            em常用于设置和字体相关的样式
                    rem
                        - 1rem等于当前页面的根元素的1font-size
                            rem常用于移动端的布局

            */
            width: 300px;   
            height: 300px;
            background-color: tomato;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: yellow;
        }

        .box3{
            font-size: 20px;
            width: 10em;
            height: 10em;
            background-color: yellowgreen;
        }

        .box4{
            width: 10rem;
            height: 10rem;
            background-color: chocolate;
        }
    </style>
</head>
<body>

    <div class="box4">

    </div>
    <!-- <div class="box3">
    </div> -->

    <!-- <div class="box1">
        <div class="box2"></div>
    </div> -->
</body>
</html>